<template>
    <view class="warpbox"> 
      <form @submit="forsubmit">
		<view class="box">
		 <view class="biaoti">
			 <view class="yijian">意见标题:</view>
			 <input class="shu" type="text" placeholder="请填写意见标题" v-model="opinion"/>
		 </view>
		 	<view class="neirong">
		 	 <view class="nei">意见内容：</view>
			 <textarea class="duowen" placeholder="多行输入" v-model="multilineInput"></textarea>
		 </view>
		 <view class="fujian">
			 <view class="fu">附件：</view>
			 <view>
			         <graceHeader title="添加图片及预览" desc="请选择图片" openType="switchTab"></graceHeader>
			         <view style="width:750px;" class="grace-bg-white grace-common-border grace-common-mt">
			             <view class="grace-add-file">
			                 <view class="grace-add-btn" @tap="addImg" v-if="btnImg">
			                     <view>+</view><view>添加照片</view>
			                 </view>
			                 <view class="garce-items" v-for="(item, index) in imgLists" :key="index">
			                     <image :src="item" mode="widthFix" :data-imgurl="item" @tap="showImgs"></image>
			                     <view class="grace-close" @tap="removeImg" :id="'grace-items-img-'+index"></view>
			                 </view>
			                
			             </view>
			       
			         </view>
			     </view>	
			  
		 </view>
		  <button class="tijiao" formType="submit">提交</button> 
		</view>
           </form>
	 </view>

</template>

<script>
	
  var maxNum = 9, _self;
	
	export default{
		//数据
	   data() {
        return {
            imgLists : [],
            btnImg : true,
			opinion:"",
			multilineInput:"",
			
        }
    },
    onLoad:function(){
        _self = this;
		//发送图片上传请求
		uni.request({
			url: 'https://www.zunyishengshui.com/maishui/ImgFile/fileUploadInTencent', 
			method:'POST',
			data: {
				file:''
			},
			header:{
				'content-type': 'application/x-www-form-urlencoded', 
			},
			success: (res) => {
				console.log(res);
				this.address = res.data.data;
				this.text = 'request success';
			}
		})	
		
		
    },
	
    methods:{
		
        addImg : function(){
            var num = maxNum - _self.imgLists.length;
            if(num < 1){return false;}
            uni.showLoading({
                title:"加载中..."
            });
            uni.chooseImage({
                count: num,
                sizeType: ['compressed'],
                success: function(res) {
                    _self.imgLists = _self.imgLists.concat(res.tempFilePaths);
                    if (_self.imgLists.length >= maxNum){
                        _self.btnImg = false;
                    }
                    uni.hideLoading();
                }
            });
        },
        removeImg : function(e){
            var index = e.currentTarget.id.replace('grace-items-img-', '');
            _self.imgLists.splice(index, 1);
            _self.imgLists = _self.imgLists;
            if (_self.imgLists.length < maxNum) {
                _self.btnImg = true;
            }
        },
        showImgs : function(e){
            var currentImg = e.currentTarget.dataset.imgurl;
            uni.previewImage({
              urls: this.imgLists,
              current : currentImg
            })
        },
	
		
    }
	
	
		
}
	

</script>

<style>
	.warpbox{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100upx;
		background: #F0F0F0;
	}
	.box{
		width: 100%;
		height: 100%;
		margin: 0px 20upx 34upx 0upx;
		border-radius: 5px;
		background: #FFFFFF;
	}
	.biaoti{
		width: 100%;
		height: 82upx;
		border-bottom: 2upx solid #EEEEEE;
	}
	.yijian{
		line-height: 82upx;
		float: left;
		font-size: 14px;
		margin-left: 46upx;
	}
	.shu{
		float: left;
		font-size: 14px;
		color: #999999;
        position: absolute;
		top: 16upx;
		left: 206upx;
	}
	.neirong{
		width: 100%;
		height: 236upx;
		border-bottom: 2upx solid #EEEEEE;
	}
	.nei{
		padding-top: 20upx;
		margin-left: 46upx;
		font-size: 14px;
	}
	.duowen{
		width: 484upx;
		height: 200upx;
		border: 2upx solid #888888;
		font-size: 12px;
		border-radius: 5px;
        position: absolute;
		left: 208upx;
		top: 100upx;	
	}
	.fujian{
		width: 100%;
		height: 600upx;
	}
	.fu{
		font-size: 14px;
		padding-top: 34upx;
		margin-left: 50upx;
	}
	.tuchuan{
		width: 200upx;
		height: 200upx;
		margin-left: 44upx;
		padding-top: 20upx;
		border: 2upx solid #09BB07;
	}
	.tijiao{
		width: 660upx;
		height: 80upx;
		background: #3B9CDB;
		color: #FFFFFF;
		font-size: 14px;
		text-align: 80upx;
	}
	
	
	
	
	
</style>
